$(function () {
  // 定义全局变量,操作get参数
  let q = {
    pagenum: 1, // 是   int     页码值
    pagesize: 5, // 是   int     每页显示数据数量
    cate_id: "", // 是   string     文章分类的Id
    state: "", // 否   string     文章的状态,可选值:已发布,草稿
  };

  // 渲染文章列表数据
  initArticleList();
  function initArticleList() {
    axios({
      url: "/my/article/list",
      method: "get",
      //   get类型用params属性,post类型用data属性
      params: q,
    }).then((res) => {
      //成功回调
      console.log(res.data.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      // 渲染
      let arr = [];
      res.data.data.forEach((element) => {
        arr.push(`
                <tr>
                <td>
                <a data-id="${
                  element.Id
                }" href="javascript:;" class="link-detail">${element.title}</a>
                </td>
                    <td>${element.cate_name}</td>
                    <td>${dataFormat(element.pub_date)}</td>
                    <td>${element.state}</td>
                    <td>
                        <a href="/article/art_edit.html?id=${
                          element.Id
                        }" class="layui-btn layui-btn-xs">编辑</a>
                        <button data-id="${
                          element.Id
                        }" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>
        `);
        // 循环结束,覆盖
        $("tbody").empty().html(arr.join(""));
        // 渲染完毕
        renderPage(res.data.total);
      });
    });
  }

  // 初始化渲染文章分类列表
  let form = layui.form;
  initArtCateList();
  function initArtCateList() {
    axios({
      url: "/my/article/cates",
    }).then((res) => {
      //成功回调
      console.log(res);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      let arr = ['<option value="">选择文章所属分类</option>'];
      res.data.data.forEach((element) => {
        arr.push(`
          <option value="${element.Id}">${element.name}</option>
          `);
      });
      let str = arr.join("");
      $("[name=cate_id]").empty().html(str);
      //   form.render();可以渲染layui中的  select/checkbox/radio
      form.render();
    });
  }

  $("#searchForm").on("submit", function (e) {
    e.preventDefault();
    // 修改参数
    q.cate_id = $('[name="cate_id"]').val();
    q.state = $('[name="state"]').val();
    initArticleList();
  });

  function renderPage(total) {
    // 分页
    const laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: "pageBox", //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, //每页显示的条数
      curr: q.pagenum, //curr当前页
      layout: ["count", "limit", "prev", "page", "next", "refresh", "skip"],
      limits: [2, 5, 10, 15, 20],
      // 页码切换后的回调函数
      jump: function (obj, first) {
        console.log(obj.curr); //当前页
        console.log(obj.limit); //每页显示条数
        if (!first) {
          // 改变参数,重新发送ajax,渲染文章列表
          q.pagenum = obj.curr;
          q.pagesize = obj.limit;
          initArticleList();
        }
      },
    });
  }

  $("tbody").on("click", ".del-btn", function () {
    let id = $(this).attr("data-id");
    layer.confirm("确定删除?", { icon: 3, title: "提示" }, function (index) {
      axios({
        url: "/my/article/delete/" + id,
        method: "get",
      }).then((res) => {
        //成功回调
        console.log(res);
        if (res.data.status !== 0) {
          return layer.msg(res.data.message);
        }
        layer.msg("删除文章成功");
        // (删除ajax成功后)当我们再次发起请求的时候,如果页面中还有一条数据,当前页--,当前页大于等于2有资格--
        if ($(".del-btn").length == 1 && q.pagenum != 1) {
          q.pagenum--;
        }
        initArticleList();
      });
      layer.close(index);
    });
  });

  $("tbody").on("click", ".link-detail", function () {
    let id = $(this).attr("data-id");
    axios({
      url: "/my/article/" + id,
      method: "get",
    }).then((res) => {
      //成功回调
      console.log(res);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      layer.open({
        type: 1,
        title: "预览文章",
        area: ["980px", "470px"],
        content: `
        <h1>${res.data.data.title}</h1>
        <div>作者：123 发布时间：2021-12-20 09:10:40 所属分类：最新 状态：已发布</div>
        <hr>
        <img src="">
        <div>${res.data.data.content}</div>
        `,
      });
    });
  });
});
